<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级别</title>

    <style>
        /*
        通配符
        1.优先级别最低
        2.性能比较差
        */
        *{
            font-size: 30px;
        }

        /*
        css样式遵循的规律:
        1.相同类型的选择器遵循:
            a, 就近原则;
            b, 叠加原则.
        2.不同类型的选择器遵循:
            1, 选择器的针对性越强, 它的优先级就越高
            2, 选择器的权值加到一起, 大的优先; 如果权值相同, 后定义的优先
            important > 内联 > id选择器 > 类选择器 | 伪类 | 属性选择器 | 伪元素 > 标签选择器 > 通配符 > 继承
        */
        /*标签选择器*/
        div {
            color: red !important;
        }

        /*类选择器*/
        .test1 {
            color: blue;
        }

        .test2 {
            color: yellow;
        }

        /*id选择器*/
        /*id选择器只能指定一个*/
        #first {
            color: #f37021;
        }
        #second {
            color: #8a8a8a;
        }

        /*复合选择器*/
        div#first {
            color: deeppink;
        }
    </style>
</head>
<body>
    <div class="test1 test2" id="first">我是用来测试优先级别的</div>
</body>
</html>